<template>
	
	<view>
		<!--搜索组件-->
		<my-search @click="gotoSearch()"></my-search>
		
		<view class="scroll-box">
			
			
			
			<!--左边滚动-->
			<scroll-view class="left-scroll-box" scroll-y :style="{height: wh+'px'}">
				<block v-for="(item,index) in cateList" :key="index">
					<view :class="['left-scroll-item',index === active ? 'active' : '']" 
					@click="activeChanged(index)"
					>{{item.cat_name}}</view>
				</block>
			</scroll-view>
			
			<!--右边滚动-->
			<scroll-view class="right-scroll-box" scroll-y :style="{height: wh+'px'}">
				<!--右侧标题-->
				<view class="cate-lv2" v-for="(item,index) in cateLevel2" :key="index">
					<!--右侧二级目录标题-->
					<view class="cate-lv2-title">/ {{item.cat_name}} /</view>
					
					<!--右侧三级目录列表-->
					<view class="cate-lv3-list">
						<view class="cate-lv3-item" v-for="(item2,index2) in item.children" :key="index2" @click="gotoGoodsList(item2)">
							<!--图片-->
							<image :src="item2.cat_icon" class="cate-lv3-img"></image>
							<!--文本-->
							<text class="cate-lv3-text">{{item2.cat_name}}</text>
						</view>
					</view>
		
				</view>
			</scroll-view>
			
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				wh:0,
				//目录信息
				cateList:[],
				//左侧选中下标
				active:0,
				//右侧cateLevel2
				cateLevel2:[]
				
			};
		},
		onLoad() {
			const sysinfo = uni.getSystemInfoSync()
			this.wh = sysinfo.windowHeight - 50

			
			this.getCateList()
		},
		methods:{
			//获取目录信息
			async getCateList(){
				const res =  await uni.$http.get('/api/public/v1/categories')
				if(res.statusCode != 200){
					return uni.showMsg()
				}
				this.cateList = res.data.message
				this.cateLevel2 = res.data.message[0].children
				console.log(res)
			},
			//修改激活目录下标
			activeChanged(index){
				this.active = index
				
				this.cateLevel2 = this.cateList[index].children
			},
			//点击三级目录转到商品列表
			gotoGoodsList(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			//去search页面
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
			
		}
	}
</script>

<style lang="scss">
.scroll-box{
	display: flex;
}

.left-scroll-box{
	width: 120px;
}

.left-scroll-item{
	line-height: 60px;
	text-align:center;
	font-size: 12px;
	background-color:#F7F7F7;
	
	&.active{
		background-color: #FFFFFF;
	}
	
}
	
.cate-lv2-title{
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	padding: 15px 0px;
}

	


.cate-lv3-list{
	display: flex;
	flex-wrap: wrap;
	
}

.cate-lv3-item{
	width: 33.33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}


.cate-lv3-img{
	width: 60px;
	height: 60px;
}

.cate-lv3-text{
	font-size: 12px;
	
	
}
	
	

</style>
